<template>
	<view class="base">
		<view class="order-all">
			<view class="nodata" v-if="unpaidList.length==0">
				没有订单
			</view>
			<view class="order-item" v-for="(item,index) in unpaidList" :key="item.id">
				<view class="item-top">
					<image class="item-top-img" :src="item.image" @error="errorimg" mode=""></image>
					<view class="item-top-detail">
						<view class="title">
							{{item.title}}
						</view>
						<view class="money">
							<view class="univalence">
								￥{{item.tprice}}
							</view>
							<uni-number-box :value="item.num" background='#fff' backgroundItem="#fff"></uni-number-box>
						</view>
					</view>
				</view>
				<view class="item-bottom">

					<button @click="cancelOrder(item.oid,index)">取消付款</button>
					<button class="continue" @click="changePayBox(index)">继续付款</button>
				</view>
			</view>
		</view>
		<view class="pay-Page" v-if="payBox">
			<view class="pay-Page-title">
				请输入密码
			</view>
			<input type="password" class="pay-Page-input" placeholder="请输入支付密码" v-model="payPwd">
			<view class="pay-Page-click">
				<button type="default" class="pay-Page-button" @click="changePayBox">取消</button> <button type="primary"
					class="pay-Page-button" @click="goPay">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUnpaid,
		cancelOrder,
		payOrder
	}
	from '@/api/system/order'
	export default {
		data() {
			return {
				unpaidList: '',
				payBox: false,
				payPwd: '',
				goodsIndex: ''
			}
		},
		methods: {
			getUnpaidList() {
				if (uni.getStorageInfoSync('userInfo')) {
					getUnpaid().then(res => {
						if (res.code == 200) {
							res.data.forEach(res => {
								res.image ? '' : res.image = '/static/images/banner/banner01.jpg'
							})
							this.unpaidList = res.data
						} else {
							this.$modal.msgError(res.msg)
						}
					})
				} else {
					this.$modal.msg('请先登录')
					setTimeout(() => {
						this.$tab.redirectTo('/pages/mine/login/login')
					}, 1000)
				}
			},
			errorimg(id) {
				return this.data[id].image = '/static/images/banner/banner01.jpg'
			},
			cancelOrder(oid, index) {
				this.$modal.confirm('是否取消订单').then(res => {
					if (res == true) {
						cancelOrder(oid).then(res => {
							if (res.code == 200) {
								this.$modal.msgSuccess('取消成功')
								this.unpaidList.splice(index, 1)
							} else {
								this.$modal.msgError(res.msg)
							}
						})
					}
				})
			},
			changePayBox(index) {
				this.goodsIndex = index
				if (this.payBox) {
					this.payPwd = ''
				}
				this.payBox = !this.payBox
			},
			goPay() {
				const data = {
					oid: this.unpaidList[this.goodsIndex].oid,
					payPwd: this.payPwd
				}
				payOrder(data).then(res => {
					if (res.code == 200) {
						this.payBox = false
						this.$modal.msgSuccess('支付成功')
						this.unpaidList.splice(this.goodsIndex, 1)
					} else {
						this.$modal.msgError(res.msg)
					}
				})
			},
		},
		onShow() {
			this.getUnpaidList()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #65A8F2;
		margin: 0;
		padding: 0;
	}

	.nodata {
		text-align: center;
		margin: 60rpx;
		font-weight: 600;
		font-size: 40rpx;
		color: #ccc;
	}

	.base {
		width: 700rpx;

		margin: auto;
	}

	.order-all {
		.order-item {
			width: 100%;
			height: 400rpx;
			border-radius: 30rpx;
			background-color: rgba(255, 255, 255, 1);
			border: 2rpx solid rgba(187, 187, 187, 1);
			margin-top: 20rpx;
			padding: 40rpx 30rpx 0 40rpx;

			.item-top {
				display: flex;

				.item-top-img {
					width: 240rpx;
					height: 240rpx;
				}

				.item-top-detail {
					margin-left: 50rpx;

					.title {
						width: 240rpx;
						height: 60rpx;
						font-size: 40rpx;
						margin: 30rpx 0 0;
						font-weight: 600;
					}

					.money {
						display: flex;
						width: 180rpx;
						height: 40rpx;
						color: rgba(16, 16, 16, 1);
						font-size: 32rpx;
						margin-top: 100rpx;

						.univalence {
							width: 100rpx;
						}

						uni-number-box {
							margin-left: 60rpx;
						}
					}
				}
			}

			.item-bottom {
				display: flex;
				width: 100%;
				justify-content: flex-end;
				margin-top: 30rpx;

				button {
					width: 160rpx;
					height: 60rpx;
					line-height: 60rpx;
					padding: 0;
					margin: 0 20rpx;
					border-radius: 50rpx;
					color: rgba(16, 16, 16, 1);
					font-size: 28rpx;
					border: 1px solid rgba(187, 187, 187, 1);
					background-color: rgba(255, 255, 255, 1);
				}

				.continue {
					color: rgba(101, 168, 242, 1);
					border: 1px solid rgba(101, 168, 242, 1);
				}
			}
		}
	}

	.pay-Page {
		position: fixed;
		top: 300rpx;
		left: calc(50% - 250rpx);
		width: 500rpx;
		height: 300rpx;
		border: 1px solid #ccc;
		border-radius: 20rpx;
		background-color: #fff;

		.pay-Page-title {
			font-size: 40rpx;
			font-weight: 700;
			margin: 20rpx;
			text-align: center;
		}

		.pay-Page-input {
			border: 1px solid #ccc;
			width: 400rpx;
			margin: 20rpx auto;
			padding: 0 20rpx;
			font-size: 30rpx;
			height: 80rpx;
			line-height: 80rpx;
		}

		.pay-Page-click {
			display: flex;
		}

		.pay-Page-button {
			width: 200rpx;
		}
	}

	::v-deep .uni-numbox-btns {
		border: 1px solid rgba(232, 232, 232, 1);
		width: 40rpx;
		height: 40rpx;
	}

	// .uni-numbox__value {
	// 	width: 50rpx !important;
	// }
</style>
